<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>执行器管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="filters">            
            <el-form-item>
            <el-tag type="info" style="height: 36px;line-height: 36px;">AppName</el-tag>
              <el-select style="min-width: 100px;" v-model="filters.appName" placeholder="请选择">
                <el-option label="xxl-job-executor-sample " value="1"></el-option> 
                <el-option label="xxl-job-executor-test" value="2"></el-option>         
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
            <el-button  type="danger" 
              @click="showAddDialog">新增执行器</el-button>
          </el-form>
        </el-col>

      <!--列表-->
      <el-table :data="datalist" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column prop="id" label="id" min-width="15%" >
        </el-table-column>
        <el-table-column prop="order" label="排序" min-width="15%" sortable>
        </el-table-column>
        <el-table-column prop="appName" label="AppName" min-width="15%" sortable>
        </el-table-column>
        <el-table-column prop="title" label="名称" min-width="15%"  sortable>
        </el-table-column>
        <el-table-column prop="addressType" label="注册方式" min-width="15%" sortable>
        </el-table-column>
        <el-table-column prop="addressList" label="online机器地址" min-width="15%" >
        </el-table-column>
        <el-table-column prop="opt" label="操作" min-width="15%">
          <template slot-scope="scope">
            <el-button type="primary"
            @click="showEditDialog(scope.$index,scope.row)" size="mini" round>编辑</el-button>
            <el-button type="danger" style="margin-left: 0px"
            @click="delItem(scope.$index,scope.row)" size="mini" round>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="recordsTotal">
        </el-pagination>
      </el-col>

      <!--新增界面-->
      <el-dialog title="新增执行器" :visible.sync ="addFormVisible" :close-on-click-modal="false">
        <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
          <el-form-item label="AppName" prop="appName">
            <el-input v-model="addForm.appName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="title">
            <el-input v-model="addForm.title" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="order">
            <el-input v-model="addForm.order" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="注册方式" prop="addressType">
              <el-radio v-model="addForm.addressType" label='0'   @change="handleAddressType">自动注册</el-radio>
              <el-radio v-model="addForm.addressType" label='1'   @change="handleAddressType">手动录入</el-radio>
          </el-form-item>
          <el-form-item label="机器地址" prop="addressList" >
            <el-input type="textarea" v-model="addForm.addressList" :rows="4" placeholder="多个地址请用逗号隔开" 
            :disabled="disableAddType"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑" :visible.sync ="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
          <el-form-item label="AppName" prop="appName">
            <el-input v-model="editForm.appName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="title">
            <el-input v-model="editForm.title" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="order">
            <el-input v-model="editForm.order" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="注册方式" prop="addressType">
              <el-radio v-model="editForm.addressType" label='0'  @change="handleEditAddressType">自动注册</el-radio>
              <el-radio v-model="editForm.addressType" label='1'  @change="handleEditAddressType">手动录入</el-radio>
          </el-form-item>
          <el-form-item label="机器地址" prop="addressList" >
            <el-input type="textarea" v-model="editForm.addressList" :rows="4" placeholder="多个地址请用逗号隔开" 
            :disabled="disableEditType"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="editSubmit">提交</el-button>
        </div>
      </el-dialog>

    </el-col>
  </el-row>
</template>

<script>
  import API from '../../api/api_executor';
  import qs from 'qs'
  export default {
    data() {
      return {
        filters: {
          appName: ''
        },
        loading: false,
        datalist: [],
        currentPage4: 4,
        recordsTotal: 0,
        start: 0,
        length: 20,



                //新增相关数据
        addFormVisible: false,//新增界面是否显示
        addLoading: false,
        addFormRules: {
          appName: [
            {required: true, message: '请输入appname', trigger: 'blur'}
          ],
          title: [
            {required: true, message: '请输入name', trigger: 'blur'}
          ],
          order: [
            {required: true, message: '请输入排序', trigger: 'blur'}
          ],
          addressType: [
            {required: true, message: '请选择注册方式', trigger: 'blur'}
          ],
          addressList: [
            {required: true, message: '请输入机器地址', trigger: 'blur'}
          ]
        },
        addForm: {
          appName: '',
          title: '',
          order: '',
          addressType: "0",
          addressList: ''
        },
        disableAddType:false,

        //编辑界面是否显示
        disableEditType:false,
        editFormVisible: false,
        editLoading: false,
        editFormRules: {
          appName: [
            {required: true, message: '请输入appname', trigger: 'blur'}
          ],
          title: [
            {required: true, message: '请输入name', trigger: 'blur'}
          ],
          order: [
            {required: true, message: '请输入排序', trigger: 'blur'}
          ],
          addressType: [
            {required: true, message: '请选择注册方式', trigger: 'blur'}
          ],
          addressList: [
            {required: true, message: '请输入机器地址', trigger: 'blur'}
          ]
        },
        editForm: {
          appName: '',
          title: '',
          order: '',
          addressType: '',
          addressList: ''
        },
      }      
    },
    methods: {
      handleSearch(){
        this.total = 0;
        this.page = 1;
        this.search();
      },
      //获取用户列表
      search: function () {
        let that = this;
        let params = {
          start: that.start,
          length: 10,
          appName: that.filters.appName,
        };
        console.log(params)
        that.loading = true;
        API.findList(qs.stringify(params)).then(function (result) {
          that.loading = false;
          console.log(result)
          if (result && result.data) {
            that.recordsTotal = result.recordsTotal;
            that.datalist = result.data;
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          console.log(error);
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    //新增
      showAddDialog: function () {
        this.addFormVisible = true;
        this.addForm = {
          appName: '',
          title: '',
          order: '',
          addressType: '0',
          addressList: ''
        };
        this.handleAddressType()
      },
      handleAddressType(){
        if(this.addForm.addressType==='0'){
          this.disableAddType=true;
        }else if(this.addForm.addressType==='1'){
         this.disableAddType=false;
        }
      },
      addSubmit: function () {
        let that = this;
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            that.loading = true;
            let para = Object.assign({}, this.addForm);
            API.add(qs.stringify(para)).then(function (result) {
              that.loading = false;
              if (result &&result.code== 200) {
                that.$message.success({showClose: true, message: '新增成功', duration: 2000});
                that.$refs['addForm'].resetFields();
                that.addFormVisible = false;
                that.search();
              } else {
                that.$message.error({showClose: true, message: '修改失败', duration: 2000});
              }
            }, function (err) {
              that.loading = false;
              that.$message.error({showClose: true, message: err.toString(), duration: 2000});
            }).catch(function (error) {
              that.loading = false;
              console.log(error);
              that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
            });

          }
        });
      },
      // 编辑修改
      showEditDialog: function (index, row) {
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);
        this.editForm.addressType=this.editForm.addressType.toString()
        this.handleEditAddressType()
      },
      handleEditAddressType(){
        if(this.editForm.addressType==='0'){
          this.disableEditType=true;
        }else if(this.editForm.addressType==='1'){
         this.disableEditType=false;
        }
      },
      editSubmit: function () {
        let that = this;
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            that.loading = true;
            console.log(this.editForm)
            let para = Object.assign({}, this.editForm);
            console.log(para)
            API.update(qs.stringify(para)).then(function (result) {
              that.loading = false;
              if (result &&result.code== 200) {
                that.$message.success({showClose: true, message: '修改成功', duration: 2000});
                that.$refs['editForm'].resetFields();
                that.editFormVisible = false;
                that.search();
              } else {
                that.$message.error({showClose: true, message: '修改失败', duration: 2000});
              }
            }, function (err) {
              that.loading = false;
              that.$message.error({showClose: true, message: err.toString(), duration: 2000});
            }).catch(function (error) {
              that.loading = false;
              console.log(error);
              that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
            });

          }
        });
      },

            //删除
      delItem: function (index, row) {
        let that = this;
        this.$confirm('确认删除该记录吗?', '提示', {type: 'warning'}).then(() => {
          that.loading = true;
          console.log(row.id)
          let params = {id: row.id};
          API.remove(qs.stringify(params)).then(function (result) {
            that.loading = false;
            if (result && result.code== 200) {
              that.$message.success({showClose: true, message: '删除成功', duration: 1500});
              that.search();
            }
          }, function (err) {
            that.loading = false;
            that.$message.error({showClose: true, message: err.toString(), duration: 2000});
          }).catch(function (error) {
            that.loading = false;
            console.log(error);
            that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
          });
        }).catch(() => {
        });
      },

    },
    mounted() {
      this.handleSearch()

    }
  }
</script>

<style>

</style>
